@import "~@patternfly/patternfly/components/Table/table.scss";
@import "~@patternfly/patternfly/components/Table/table-grid.scss";

.ct-table {
    // Reverse out the default padding for table bodies,
    // so lists can have more horizontal room
    &-wrapper {
        // Container padding is defined higher up; it cascades here
        // (so this can always be in sync to reverse out the actual padding)
        --outer-padding: var(--continer-padding-x);
        --padding-offset-border: 1px;
        --padding-offset-x: calc(var(--pf-global--spacer--lg) + (var(--padding-offset-border) * 2));
        --padding-offset-y: 1rem;
        max-width: calc(100vw - (var(--outer-padding) * 2));
        overflow: auto;
        clear: both;
        padding-bottom: var(--padding-offset-y);
        margin-bottom: calc(var(--padding-offset-y) * -1);
        margin: calc(var(--padding-offset-y) * -0.5) calc(var(--padding-offset-x) * -1) calc(var(--padding-offset-y) * -1);

        // Apply standard padding to the sides of the header
        > .ct-table-header {
            padding: 0 var(--pf-global--spacer--md);
        }
    }

    &.pf-m-compact {
        > thead, > tbody {
            > tr:not(.pf-c-table__expandable-row) {
                // We actually want the normal font size for our lists
                --pf-c-table-cell--FontSize: var(--pf-global--FontSize--md);
            }
        }
    }

    &-header {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        > :only-child {
            flex: auto;
        }
    }

    &-heading {
        // Push buttons to the right by stretching the heading
        flex: auto;
        // Add a bit of minimum margin to the right of the heading
        margin-right: var(--pf-global--spacer--md);
        // Set a minimum height of 3rem, so when buttons wrap, there's spacing
        min-height: var(--pf-global--spacer--2xl);
        // Make sure textual content is aligned to the center
        display: flex;
        align-items: center;
    }

    &-actions {
        > * {
            margin: var(--pf-global--spacer--xs) 0 var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
        }

        > :first-child {
            margin-left: 0;
        }
    }

    &-empty {
        tr td {
            font-weight: normal;
            // FIXME removing !important will result in this not getting applied
            text-align: center !important;
        }
    }

    // https://github.com/patternfly/patternfly-react/issues/4613
    .pf-c-table__expandable-row {
        th {
            &.pf-m-no-padding {
                padding: 0 0 0 var(--pf-c-table__expandable-row--after--border-width--base); // set padding-left to adjust for left border.

                .pf-c-table__expandable-row-content {
                    padding: 0;
                }
            }
        }
    }

    .pf-c-table__expandable-row {
        [data-label]::before {
            display: None;
        }
    }

    // Don't wrap labels
    [data-label]::before {
        white-space: nowrap;
    }

    // Fix toggle button alignment
    .pf-c-table__toggle {
        // Workaround: Chrome sometimes oddly expands the table,
        // unless a width is set. (This affects panels the most, but not only.)
        // As the width is smaller than the contents, and this is a table,
        // the cell will stay at the correct width.
        width: 1px;
    }

    .pf-c-button.pf-m-expanded .pf-c-table__toggle-icon {
        // Similar to PF4, but with a translate to bump the expanded icon down 3 pixels,
        // to better align the expanded form
        transform: translateY(3px) rotate(var(--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
    }

    // Shrink buttons down a little
    td:not(.pf-c-table__toggle) {
        > .pf-c-button,
        > .pf-c-input-group > .pf-c-button,
        > .btn-group > .pf-c-button {
            padding: 0.25rem 0.75rem;
        }
    }

    // Remove excess PF4 nested compact paddings
    // (as PF4 has different assumptions)
    .pf-c-table.pf-m-compact tr {
        > :first-child {
            --pf-c-table-cell--PaddingLeft: var(--pf-c-table--m-compact-cell--first-last-child--PaddingLeft);
        }

        > :last-child {
            --pf-c-table-cell--PaddingRight: var(--pf-c-table--m-compact-cell--first-last-child--PaddingLeft);
        }
    }

    // Properly align actions on the end
    > tbody > tr > td:last-child > .btn-group {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    // Use PF4 style headings
    > thead th {
        font-size: var(--pf-global--FontSize--sm);
        font-weight: var(--pf-global--FontWeight--semi-bold);
    }

    // Adjust the padding for nested ct-tables in ct-tables
    .ct-table {
        td, th {
            &:first-child {
                --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--lg);
            }

            &:last-child {
                --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--lg);
            }
        }
    }
}

// Special handling for rows with errors
.pf-c-table tbody tr:first-child.error {
    &, tbody.pf-m-expanded > & {
        background-color: var(--color-ct-list-critical-bg) !important; /* keep red background when expanded */
        border-top: 1px solid var(--color-ct-list-critical-border);
        border-bottom: 1px solid var(--color-ct-list-critical-border);

        &:focus,
        &:focus-within,
        &:hover {
            background-color: var(--color-ct-list-critical-bg-hover) !important;
            border-top-color: var(--color-ct-list-critical-bg-hover);
            border-bottom-color: var(--color-ct-list-critical-bg-hover);
        }
    }

    @media screen and (min-width: 641px) {
        td.version:hover .truncating {
            background: linear-gradient(to left, rgba(251, 240, 240, 0), var(--color-ct-list-critical-bg-hover) 3em);
        }
    }
}
